<template>
<el-dialog custom-class="control-schedul" append-to-body title="提示" :close-on-press-escape="false" :visible.sync="data.show" :show-close="false" :close-on-click-modal="false">
    <div slot="title" style="display: flex; align-items: center; margin-bottom: 16px;">
        <i class="iconfont icon-tishi"></i>
        <span class="control-schedul-tips">目前实验存在下游依赖，点击取消关闭弹框。点击仅关闭调度，不清除下游依赖，直接关闭实验调度。点击清除下游依赖，将会把下游所有依赖清空，清除下游依赖会直接关闭调度。<br>请确认后操作。</span>
    </div>
    <span class="control-schedul-label">任务依赖如下:</span>
    <el-table class="control-schedul-table" :data="data.tableData">
        <el-table-column show-overflow-tooltip prop="scheduleName" label="任务名称"></el-table-column>
        <el-table-column show-overflow-tooltip prop="lastUpdateOper" label="最近提交人"></el-table-column>
        <el-table-column show-overflow-tooltip prop="status" label="状态">
            <template slot-scope="scope">
                <p>{{scope.row.status?'已调度':'未调度'}}</p>
            </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="period" label="调度周期"></el-table-column>
        <el-table-column show-overflow-tooltip prop="schedulTimeStr" label="调度时刻"></el-table-column>
        <!-- <el-table-column show-overflow-tooltip label="下一次执行时间">
            <template slot-scope="scope">
                <p>{{scope.row.execPlan && scope.row.execPlan[0]}}</p>
            </template>
        </el-table-column> -->
    </el-table>
    <span slot="footer" class="dialog-footer">
        <el-button @click="handleClickClose('取消')">取 消</el-button>
        <el-button @click="handleClickClose('仅关闭调度')">仅关闭调度</el-button>
        <el-button type="danger" style="background: #FF2826;" @click="handleClickClose('清除下游依赖')">清除下游依赖</el-button>
    </span>
</el-dialog>
</template>

<script>
export default {
    name: 'ControlSchedul',
    props: {
        data: {
            required: true,
            type: Object
        }
    },
    data () {
        return {
        }
    },
    methods: {
        handleClickClose (val) {
            this.$emit('click', val)
        }
    }
}
</script>

<style lang="less">
.control-schedul {
    .control-schedul-table {
        td {
            padding: 0;
        }
    }
    .icon-tishi {
        color: #f5a623;
        font-size: 23px;
        margin-right: 16px;
    }
    .control-schedul-tips {
        white-space: pre-line;
        word-break: break-all;
        word-wrap: break-word;
        background: rgb(255,255,204);
        padding: 8px;
    }
    .control-schedul-label {
        display: inline-block;
        margin-bottom: 16px;
    }
}
</style>
